<template>
  <div class="login">
    <div class="textImg">
      <img src="@/assets/logo.jpg" alt="">
      <h4>宏香馨商城</h4>
      <!-- 为了方便管理您的信息，请先绑定您的手机号码 -->
      <p>输入手机号获取短信验证码登录</p>
    </div>
    <div class="form">
      <div class="form_item" >
        <!-- <label>手机号码</label> -->
        <input type="text" placeholder="请输入手机号" v-model="tel">
      </div>
      <div class="form_item" style="position:relative;" >
        <!-- <label>图片验证码</label> -->
        <input type="text" placeholder="请输入图片验证码" v-model="imgText">
        <div class="img" @click="refreshImg">
          <img :src="imgCode" alt="" >
        </div>
      </div>
      <div class="form_item" style="position:relative;">
        <!-- <label>验证码</label> -->
        <input type="text" placeholder="请输入验证码" v-model="msgCode">
        <input type="button" class="getCode" v-model="sendText" @click="getCode">
      </div>
      <input type="button" value="登录" class="bindTel" :class="{isSend: isSend}" @click="sms_login">
    </div>
  </div>
</template>

<script>
import { msgLogin, getYan, getImgYan } from "@/api/index.js";
export default {
  data() {
    return {
      isSend: false,
      sendText: "获取验证码",
      num: 90,
      tel: "",
      msgCode: "",
      set: "",
      imgCode: "http://www.chamiw.com/index.php/Api/User/verify",
      imgText: ""
    };
  },
  created() {
    this.$store.commit("SETPAGEINFO", {
      title: '用户登录',
      description: '宏香馨用户登录'
    });
  },
  methods: {
    refreshImg() {
      this.imgCode =
        "http://www.chamiw.com/index.php/Api/User/verify?" + Math.random();
    },
    getCode() {
      if (this.num === 90) {
        getYan(this.imgText, this.tel).then(result => {
          if (result.data.success == "yes") {
            this.sendText = "正在发送...";
            this.$toast("验证码已发送至您的手机");
            this.set = setInterval(() => {
              this.num--;
              this.sendText = this.num + "s";
            }, 1000);
            this.isSend = true;
          } else {
            this.refreshImg();
            this.$toast(result.data.message);
          }
        });
      }
    },
    sms_login() {
      var phoneRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneRegex.test(this.tel)) {
        // el.warning.telNumber = "请输入正确的手机号";
        this.$toast("请输入正确的手机号");
        return false;
      }
      msgLogin(this.tel, this.msgCode).then(result => {
        if (result.data.success == "yes") {
          this.$toast({
            message: "绑定成功",
            iconClass: "iconfont icon-dagou_wuquan"
          });
          if(Object.keys(this.$route.params).length == 0) {
            location.href = 'http://www.chamiw.com/App/dist/#/index?good_id=37&username=20&platform=kfh5';
          }
          this.$router.push({
            name: "确认订单",
            params: this.$route.params
          });
        } else {
          this.$toast(result.data.message);
        }
      });
    }
  },
  watch: {
    num() {
      if (this.num <= 0) {
        this.sendText = "获取验证码";
        this.num = 90;
        clearInterval(this.set);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: to(24);
  position: relative;
  .textImg {
    width: 100%;
    padding: 0 to(55);
    text-align: center;
    img {
      width: to(132);
      height: to(132);
      background: rgba(0, 0, 0, 1);
      border-radius: to(10);
      margin: to(88) 0 to(25) 0;
    }
    h5 {
      font-size: to(32);
    }
    p {
      text-align: center;
      margin: to(36) 0;
      color: #505050;
    }
  }
  input {
    -webkit-appearance: none;
  }
  .form {
    width: 100%;
    padding: 0 to(20);
    .form_item {
      width: 100%;
      height: to(83);
      display: -webkit-flex;
      display: flex;
      border-bottom: 1px solid #ccc;
      label {
        flex: 3;
        line-height: to(83);
        color: #505050;
      }
      input[type="text"] {
        flex: 8;
        padding: 0;
        margin: 0;
        border: none;
        padding-left: to(20);
        &::-webkit-input-placeholder {
          color: #d0d0d0;
          font-size: to(25);
        }
        line-height: to(83);
        font-size: to(25);
      }
      .img {
        position: absolute;
        right: 0;
        width: to(250);
        overflow: hidden;
        height: 100%;
        // box-sizing: content-box;
        img {
          position: absolute;
          // left: -25%;
          right: -25%;
          width: 135%;
          height: 90%;
          border: 1px dashed #ccc;
        }
      }
      .getCode {
        position: absolute;
        height: to(45);
        top: to(19);
        right: to(0);
        background-color: #fff;
        border: 1px solid #c42222;
        color: #c42222;
        border-radius: to(5);
        width: to(148);
      }
    }
    .bindTel {
      width: 100%;
      height: to(70);
      font-size: to(25);
      background-color: #9e9e9e;
      color: white;
      border: 0;
      border-radius: to(5);
      margin-top: to(25);
    }
    .isSend {
      background-color: #9d0000;
    }
  }
}
</style>
